<template>
  <div class="comic">
    <div v-if="!state.reading">
      <div class="comic-list">
        <div v-for="(x, y) in state.comics" :key="y" :class="y == state.comicIdx ? 'active' : ''"
          @click="selectComic(y)">
          {{ x }}
        </div>
      </div>
      <div class="vol-list">
        <div v-for="(x, y) in state.vols" :key="y" :class="y == state.volIdx ? 'active' : ''" @click="selectVol(y)">
          {{ x }}
        </div>
      </div>
    </div>
    <div v-else class="img-list">
      <div class="img-con">
        <img mode="heightFix" :src="imgUrl" alt="" />
      </div>
      <div :class="state.type==1?'control-btn':'line-btn'" v-if="state.isShow">
        <!-- <div><el-input v-model="state.volIdx" @change="changeVol" /></div> -->
        <div>{{ state.volIdx + 1 }}</div>
        <div @click="lastVol"><el-icon>
            <component :is="elicons['ArrowUpBold']" />
          </el-icon>
        </div>
        <!-- <div><el-input v-model="state.imgIdx" /></div> -->
        <div>{{ state.imgIdx + 1 }}</div>
        <div @click="lastPage"><el-icon>
            <component :is="elicons['ArrowLeftBold']" />
          </el-icon></div>
        <div @click="showBtn">隐藏</div>
        <div @click="nextPage"><el-icon>
            <component :is="elicons['ArrowRightBold']" />
          </el-icon></div>
        <div @click="back"><el-icon>
            <component :is="elicons['Back']" />
            <Back />
          </el-icon></div>
        <div @click="nextVol"><el-icon>
            <component :is="elicons['ArrowDownBold']" />
          </el-icon></div>
        <div @click="()=>{ state.show = true}"><el-icon>
            <component :is="elicons['Setting']" />
          </el-icon></div>
      </div>
      <div class="hide-btn" v-else @click="showBtn">
        显示
      </div>
    </div>
    <el-dialog :title="state.title" v-model="state.show" width="80%">

      2222
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, isShallow, onMounted, reactive } from 'vue'
import system from '@/utils/system';
import { queryData } from '@/apis/mysql';
import elicons from '@/utils/elicons';
let url = ''
const state = reactive({
  comics: [],
  comicIdx: 0,
  open: false,
  vols: [],
  volIdx: 0,
  imgs: [],
  imgIdx: 0,
  reading: false,
  isShow: true,
  title: '设置',
  show: false,
  fileType: 'png',
  type: 1
})
onMounted(() => {
  // // console.log(system)
  getPath()
  keyUp()
})

const imgUrl = computed(() => {
  return localDir() + '/' + state.imgs[state.imgIdx]
})

function localDir() {
  return url + '/' + state.comics[state.comicIdx] + '/' + state.vols[state.volIdx]
}

function getPath() {
  queryData({
    table: 'resources',
    data: {
      name: 'comics'
    }
  }).then((res) => {
    let obj = res.data[0]
    url = `${obj.disk}:/${obj.path}`
    // document.title = obj.title
    getcomics()
  })
}

function back() {
  state.reading = false
}

function showBtn() {
  state.isShow = !state.isShow
}

function getcomics() {
  system.readDir(url).then(res => {
    state.comics = res
    selectComic(0)
  })
}

function selectComic(y) {
  state.comicIdx = y
  let path = url + '/' + state.comics[y]
  system.readDir(path).then(res => {
    state.vols = res
    // console.log(res)
  })
}

function handleImageError() {
  if (state.fileType == '.png') {
    state.fileType = '.jpg'
    // console.log(imgUrl.value)
  } else {
    state.fileType = '.png'
  }
  // console.log('图片加载失败');
}

function changeVol() {
  selectVol(state.volIdx)
  state.imgIdx = 0
}

function selectVol(y) {
  state.volIdx = y
  let path = localDir()
  system.readDir(path).then(res => {
    state.imgs = res
    state.reading = true
  })
}
function lastPage() {
  // state.imgIdx = Number(state.imgIdx) - 1
  // if (state.imgIdx < 0) {
  //   state.volIdx = Number(state.volIdx) - 1
  //   state.imgIdx = state.imgs.length - 1
  // }
  if (state.imgIdx > 0) {
    state.imgIdx = Number(state.imgIdx) - 1
  }
}

function lastVol() {
  if (state.volIdx > 0) {
    state.volIdx = Number(state.volIdx) - 1
    selectVol(state.volIdx)
    state.imgIdx = 0
  }
}
function nextVol() {
  state.volIdx = Number(state.volIdx) + 1
  selectVol(state.volIdx)
  state.imgIdx = 0
}
function nextPage() {
  // state.imgIdx = Number(state.imgIdx) + 1
  // if (state.imgIdx >= state.imgs.length - 1) {
  //   nextVol()
  // }
  if (state.imgIdx < state.imgs.length - 1) {
    state.imgIdx = Number(state.imgIdx) + 1
  }
}

function open() {
  system.openFile(localDir())
}

function keyUp() {
  document.addEventListener('keypress', (e) => {
    switch (e.code) {
      case 'KeyW':
        lastVol()
        break;
      case 'KeyS':
        nextVol()
        break;
      case 'KeyQ':
        show()
        break;
      case 'KeyE':
        //play()
        break;
      case 'KeyA':
        lastPage()
        break;
      case 'KeyD':
        lastPage()
        break;
      case 'Space':
        //play()
        break;
      case 'KeyZ':
        back()
        break;
      case 'KeyC':
        // nextClassify()
        break;
    }
  })
}
</script>

<style scoped lang="scss">
.comic {
  width: 100%;
  height: 100%;

  .comic-list {
    display: flex;

    >div {
      width: 100px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .active {
      color: aquamarine;
    }
  }

  .vol-list {
    width: 90vw;
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;

    >div {
      // width: 100px;
      // height: 30px;
      margin: 10px;
      padding: 10px 20px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      background-color: #ffe87f;
      color: #000;
    }

    .active {
      color: aquamarine;
    }
  }



  .img-list {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    position: relative;

    .img-con {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      >img {
        height: 100%;
      }
    }

    .active {
      color: aquamarine;
    }

    .hide-btn {
      width: 60px;
      height: 60px;
      position: absolute;
      bottom: 20px;
      left: 20px;
      border-radius: 50%;
      border: 1px solid #fff;
      user-select: none;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .control-btn {
      width: 142px;
      height: 142px;
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      bottom: 20px;
      left: 20px;
      border-radius: 50%;
      border: 1px solid #fff;
      user-select: none;
      background-color: #000;

      >div {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 18px;
      }
    }

    .line-btn {
      height: 40px;
      display: flex;
      position: absolute;
      bottom: 20px;
      left: 20px;
      user-select: none;
      background-color: #000;

      >div {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 18px;
      }
    }
  }
}
</style>
